<template>
    <div v-for="(item, index) in routeList" :key="index">
        <!-- 1,当没有孩子2,是要显示 -->
        <el-menu-item :index='item.path' v-if="!item.children && !item.meta.hidden" @click="handleEvent">
            <el-icon>
                <component :is="item.meta.icon"></component>
            </el-icon>
            {{ item.meta.title }}
        </el-menu-item>
        <!-- 2,当只有一个孩子,但是只显示孩子 -->
        <el-menu-item :index='item.children[0].path' v-if="item.children && item.children.length === 1"
            @click="handleEvent">
            <el-icon>
                <component :is="item.children[0].meta.icon"></component>
            </el-icon>
            {{ item.children[0].meta.title }}
        </el-menu-item>
        <!-- 3,当有孩子且孩子的个数大于1 -->
        <el-sub-menu :index="item.path" v-if="item.children && item.children.length > 1">
            <template #title>
                <el-icon>
                    <component :is="item.meta.icon"></component>
                </el-icon>
                {{ item.meta.title }}
            </template>
            <!-- 传孩子自己调用自己 -->
            <MenuContent :routeList="item.children"></MenuContent>
        </el-sub-menu>
    </div>
</template>
<script lang="ts" setup name="MenuContent">
// 引入路由模块
// 使用routes的数据
// 递归调用自己的模块
import MenuContent from "@/components/menu-content/index.vue"
import { useRoute, useRouter } from "vue-router"
const $useRoute = useRoute()
defineProps(["routeList"])

const useRouters = useRouter()
function handleEvent() {
}
</script>
<style scoped lang="scss"></style>